<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <div :class="['toolbar']">
          <a-button
            type="primary"
            style="margin-right: 10px"
            @click="addStockShow = true"
          >
            添加股票
          </a-button>
          <a-input-search
            v-model:value="ApiData.stockInfo1"
            placeholder="股票名称查询"
            style="width: 200px; margin-right: 10px"
            @search="onSearchByName"
            @pressEnter="onSearchByName"
          />
          <a-input-search
            v-model:value="ApiData.stockInfo2"
            placeholder="股票识别号查询"
            style="width: 200px"
            @search="onSearchByNum"
            @pressEnter="onSearchByNum"
          />
        </div>
      </template>
    </vxe-toolbar>
    <!-- 表格 -->
    <vxe-table
      border
      show-header-overflow
      show-overflow
      resizable
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="name"
        title="股票名"
        min-width="180"
      ></vxe-table-column>
      <vxe-table-column title="股票识别号" min-width="180">
        <template #default="{ row }">
          <a-tag color="red">{{ row.identifier }}</a-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="price"
        title="价格(元)"
        min-width="180"
      ></vxe-table-column>
      <vxe-table-column field="address" title="操作" min-width="180">
        <template #default="{ row }">
          <!-- <a class="icon-bianji iconfont icon"></a> -->

          <!-- 删除 -->
          <a-popconfirm
            placement="right"
            ok-text="Yes"
            cancel-text="No"
            @confirm="deleteUserInfo(row)"
          >
            <template v-slot:title>
              <p>删除不可恢复，确定删除该股票嘛?</p>
            </template>
            <a class="icon-shanchu iconfont icon"></a>
          </a-popconfirm>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 分页 -->
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="dataTotalNum"
      :defaultPageSize="ApiData.pageSize"
      @change="onChange"
    />

    <!-- 编辑弹窗 -->
    <a-modal
      title="添加股票"
      :visible="addStockShow"
      :confirm-loading="confirmLoading"
      cancelText="取消"
      okText="确定"
      @ok="sureAddStock"
      @cancel="addStockShow = false"
    >
      <div>
        <!-- 股票名 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin: 10px 0"
        >
          <a-col :span="5">股票市场：</a-col>
          <a-col :span="19">
            <a-select
              default-value="sh"
              style="width: 120px"
              @change="handleChange"
            >
              <a-select-option value="sh">深市</a-select-option>
              <a-select-option value="sz">泸市</a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <!-- 股票代码 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin: 10px 0"
        >
          <a-col :span="5">股票识别号：</a-col>
          <a-col :span="19">
            <a-input
              placeholder="请输入新添加的股票识别号"
              v-model:value="addStockForm.identifier"
            />
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { stockList, stockDelete, addStock } from '@/api/stock'
export default {
  data() {
    return {
      // 表格数据居中
      allAlign: 'center',
      // api数据
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        type: 0, //0 全部 1 根据股票名称查询 2 根据股票识别号查询
        stockInfo1: '', //	股票名称
        stockInfo2: '', //	股票标识号
      },
      // 表格数据
      tableData: [],
      // 总数
      dataTotalNum: 0,
      // 添加股票弹窗
      addStockShow: false,
      // 添加股票表单
      addStockForm: {
        identifier: '',
        name: 'sh',
      },
      // 新增股票loading
      confirmLoading: false,
    }
  },
  mounted() {
    this.getStockListData()
  },
  watch: {
    ApiData: {
      handler(newV, oldV) {
        if (newV.stockInfo1 === '' && newV.stockInfo2 === '') {
          this.ApiData.type = 0
          this.getStockListData()
        }
      },
      deep: true,
    },
  },
  methods: {
    /**
     * 用户查询
     */
    onSearch() {},
    /**
     * 分页
     */
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.getUserListData()
    },
    /**
     * 股票列表查询
     */
    getStockListData() {
      stockList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.dataTotalNum = res.queryResult.total
      })
    },
    /**
     * 删除用户
     */
    deleteUserInfo(info) {
      stockDelete(info.id).then((res) => {
        this.$message.success('删除成功')
        this.getStockListData()
      })
    },
    /**
     * 股票名字查询
     */
    onSearchByName() {
      this.ApiData.type = 1
      this.ApiData.stockInfo = this.ApiData.stockInfo1
      this.getStockListData()
      this.$message.success('查询成功')
    },
    /**
     * 股票识别号查询
     */
    onSearchByNum() {
      this.ApiData.type = 2
      this.ApiData.stockInfo = this.ApiData.stockInfo2
      this.getStockListData()
      this.$message.success('查询成功')
    },
    /**
     * 添加股票
     */
    sureAddStock() {
      if (this.addStockForm.name === '') {
        this.$message.error('股票名称不能为空')
        return
      }
      if (this.addStockForm.identifier === '') {
        this.$message.error('股票识别号不能为空')
        return
      }
      // this.addStockForm.identifier =this.addStockForm.identifier
      addStock(this.addStockForm).then((res) => {
        this.$message.success('添加成功')
        this.getStockListData()
        this.addStockShow = false
      })
    },
    /**
     * 股票市场选择
     */
    handleChange(e){
      this.addStockForm.name = e
    }
  },
}
</script>
<style lang="less" scoped>
.icon {
  margin: 0 10px;
  &:nth-child(2) {
    color: gray;
  }
}
.toolbar {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
}
</style>>

